<!--  线 + 柱混合图 -->
<template>
  <el-row :gutter="18">
    <el-col :span="6">
      <div class="grid-content ep-bg-purple">
        <div v-for="(switchData, index) in dynamicswitchesData" :key="index">
          <el-switch
            v-model="switchData.value"
            class="mb-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
            :active-text="switchData.text"
            inactive-text=""
            @change="updateChart(ref(switchData.value), index)"
          />
          <br v-if="index !== dynamicswitchesData.length - 1" />
        </div>
        <br />
      </div>
    </el-col>
    <el-col :span="18">
      <!-- 这里放图片的声明 -->
      <div :id="id" :class="className" :style="{ height, width }"></div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { useStore } from "vuex";

const store = useStore();
// 在组件中访问 Vuex store 中的数组
const selectedData = ref(store.state.FAselectedData);
const selectedColumns = ref(store.state.FAselectedColumns);
// 生成目标格式的二维数组
const datasetSource = [
  // 第一行为表头的 label
  selectedColumns.value.map((selectedColumns) => selectedColumns.label),
  // 遍历表格数组，每一行与表头的 prop 对应
  ...selectedData.value.map((row) =>
    selectedColumns.value.map((selectedColumns) => row[selectedColumns.prop])
  ),
];

// 打印结果
console.log(datasetSource);
debugger;

//生成除时间列和表头外其余数据均为0的数组
const headers = datasetSource[0];
const times = datasetSource.map((row) => row[0]);
const nullSource = [headers];
for (let i = 1; i < datasetSource.length; i++) {
  const newRow = [times[i]];

  for (let j = 1; j < datasetSource[i].length; j++) {
    newRow.push(0);
  }

  nullSource.push(newRow);
}

console.log(nullSource);

var dynamicswitchesData = ref<Array<{ value: boolean; text: string | number }>>(
  []
);

// const myChart = ref<echarts.ECharts | null>(null);

const dynamicsource = ref<Array<string | number>>([]);

const dynamicArray = ref<string[][]>([]);

const source = ref(nullSource);

const source_copy = ref(datasetSource);

const source_second = ref(nullSource);

for (
  let switchdataIndex = 1;
  switchdataIndex < source_copy.value[0].length;
  switchdataIndex++
) {
  dynamicswitchesData.value.push({
    value: false,
    text: source_copy.value[0][switchdataIndex],
  });
}
debugger;

const updateChart = (value1: globalThis.Ref<boolean>, columnIndex: number) => {
  if (value1.value == true) {
    for (let i = 1; i < source.value.length; i++) {
      source_second.value[i][columnIndex + 1] =
        source_copy.value[i][columnIndex + 1];
    }
    // source1_second.value = source.value
  } else {
    for (let i = 1; i < source.value.length; i++) {
      source_second.value[i][columnIndex + 1] = 0;
    }
  }
  const visualseries: { type: string }[] = [];

  for (
    let typeIndex = 0;
    typeIndex < source_copy.value[0].length - 1;
    typeIndex++
  ) {
    visualseries.push({
      type: "line",
    });
  }
  debugger;
  if (chart.value) {
    const option = {
      dataset: {
        source: source_second.value,
      },
      series: visualseries.map((_, index) => ({
        type: "line",
        encode: {
          x: 0,
          y: 1 + index, // 使用不同的 y 列
        },
      })),
    };
    chart.value.setOption(option);
  }
};

const props = defineProps({
  id: {
    type: String,
    default: "FAselectChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
});

const options = {
  dataset: {
    source: source.value,
  },
  title: {
    text: "",
  },
  tooltip: {
    trigger: "axis",
  },
  grid: {
    left: "7%",
    right: "8%",
    bottom: "11%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
  },
  yAxis: {
    type: "value",
  },
  dataZoom: [
    {
      type: "slider",
      xAxisIndex: 0,
      filterMode: "none",
      // top: '100%',
      bottom: "1%",
    },
    {
      type: "inside",
      xAxisIndex: 0,
      filterMode: "none",
    },
  ],
  series: [
    //     { type: 'line' , lineStyle: {  color: 'black', width: 3,},  itemStyle: {
    //         color: 'black' // 设置点的颜色为白色
    //   }},

    { type: "line" },
    // { type: 'line' },
    // { type: 'line' },
    // { type: 'line' },
  ],
};

const chart = ref<any>("");
onMounted(() => {
  // 在组件挂载时更新数据
  selectedData.value = store.state.FAselectedData;
  selectedColumns.value = store.state.FAselectedColumns;

  // 生成目标格式的二维数组
  const datasetSource = [
    // 第一行为表头的 label
    selectedColumns.value.map((selectedColumns) => selectedColumns.label),
    // 遍历表格数组，每一行与表头的 prop 对应
    ...selectedData.value.map((row) =>
      selectedColumns.value.map((selectedColumns) => row[selectedColumns.prop])
    ),
  ];

  console.log(datasetSource);
  console.log(nullSource);
  // 图表初始化
  // chart.value = markRaw(
  //   echarts.init(document.getElementById(props.id) as HTMLDivElement)
  // );
  // 获取图表容器
  const chartDom = document.getElementById(props.id) as HTMLDivElement;
  // 设置初始宽度，这里设置为窗口宽度减去 700
  chartDom.style.width = window.innerWidth - 700 + "px";
  // 图表初始化
  chart.value = markRaw(echarts.init(chartDom));

  chart.value.setOption(options);

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});
</script>
<!-- const chartDom = document.getElementById("main"); chartDom.style.width =
window.innerWidth - 800 + "px"; -->
